<template>
<!-- 实例信息 lzy 2022-8-18 16点23分 -->
    <div id="userRealBinds">
        <div class="userRealBinds_div1">
            <el-row :gutter="30">
                <el-col :span="5">
                    <el-input v-model="realName" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="5">
                    <el-button icon="el-icon-search" circle></el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:20px;margin-bottom:20px;">
                <el-col :span="2">
                    <el-button @click="openSaveVisiable" class="el-icon-plus" size="small" type="success" >&nbsp;添加</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button @click="handleCloseDeleteBatch()" class="el-icon-delete" size="small" type="danger">&nbsp;批量删除</el-button>
                </el-col>
            </el-row>
            <el-table
                ref="multipleTable"
                :data="userRealBindsList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="realName"
                label="真实姓名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="papersType"
                label="证件类型"
                width="120">
                    <template slot-scope="scope">
                        <div v-for="item in papersTypeList" :key="item.id">
                            <span v-if="item.id === scope.row.papersTypeId">{{item.papersTypeText}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="identity"
                label="身份证号"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                prop="phone"
                label="手机号"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                prop="passengerTypeId"
                label="游客类型"
                show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div v-for="item in passengerTypeList" :key="item.id">
                            <el-tag v-if="item.id === scope.row.passengerTypeId">{{item.passengerTypeText}}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="230">
                    <template slot-scope="scope">
                        <el-link class="el-icon-edit" @click="userRealBindsEdit(scope.row)"></el-link>
                        &nbsp;&nbsp;
                        <el-link class="el-icon-delete" @click="hintDetele(scope.row.id)" type="danger"></el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增实名信息弹窗 -->
            <el-dialog
                title="新增实名信息"
                :visible.sync="saveVisiable"
                width="30%"
                :before-close="handleClose"
                :destroy-on-close="true">
                <el-form :model="userRealBindsForm" :rules="saveUserRealBindsRules" ref="userRealBindsForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="证件类型" :label-width="formLabelWidth" prop="userId">
                        <el-select v-model="userRealBindsForm.papersTypeId" filterable placeholder="证件类型">
                            <el-option
                                v-for="item in papersTypeList"
                                :key="item.id"
                                :label="item.papersTypeText"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input v-model="userRealBindsForm.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证" prop="identity">
                        <el-input v-model="userRealBindsForm.identity"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="userRealBindsForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="游客类型" :label-width="formLabelWidth" prop="passengerTypeId">
                        <el-select v-model="userRealBindsForm.passengerTypeId" filterable placeholder="游客类型">
                            <el-option
                                v-for="item in passengerTypeList"
                                :key="item.id"
                                :label="item.passengerTypeText"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveSubmitForm('userRealBindsForm')">立即创建</el-button>
                        <el-button @click="resetForm('userRealBindsForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!-- 修改实名信息弹窗 -->
            <el-dialog
                title="修改实名信息"
                :visible.sync="editVisiable"
                width="30%"
                :before-close="handleClose"
                :destroy-on-close="true">
                <el-form :model="userRealBindsFormEdit" :rules="editUserRealBindsRules" ref="userRealBindsFormEdit" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="证件类型" :label-width="formLabelWidth" prop="userId">
                        <el-select v-model="userRealBindsFormEdit.papersTypeId" filterable placeholder="证件类型">
                            <el-option
                                v-for="item in papersTypeList"
                                :key="item.id"
                                :label="item.papersTypeText"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input v-model="userRealBindsFormEdit.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证" prop="identity">
                        <el-input v-model="userRealBindsFormEdit.identity"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="userRealBindsFormEdit.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="游客类型" :label-width="formLabelWidth" prop="passengerTypeId">
                        <el-select v-model="userRealBindsFormEdit.passengerTypeId" filterable placeholder="游客类型">
                            <el-option
                                v-for="item in passengerTypeList"
                                :key="item.id"
                                :label="item.passengerTypeText"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="editSubmitForm('userRealBindsFormEdit')">立即修改</el-button>
                        <el-button @click="resetForm('userRealBindsFormEdit')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'UserRealBindsViews',
    data () {
        /* 新增校验合法真实姓名 */
        var validateSaveRealName = (rule, value, callback) => {
            const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
            if (!value) {
                return callback(new Error('真实姓名不能为空!!'))
            } else {
                if (!realnameReg.test(value)) {
                    return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
                } else {
                    this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkRealName', {
                        params: {
                            realName: value,
                            userId: this.userRealBindsForm.userId
                        }
                    }).then(res => {
                        if (!res.data.flag) {
                            return callback(new Error('当前用户已经被绑定,可以换个账户绑定'))
                        } else {
                            callback()
                        }
                    })
                }
            }
        }
        /* 新增校验合法手机号 */
        var validateSavePhone = (rule, value, callback) => {
            const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (!value) {
                return callback(new Error('手机号码不能为空!!'))
            }
            setTimeout(() => {
                if (!phoneReg.test(value)) {
                    return callback(new Error('手机号码格式错误'))
                } else {
                    callback()
                }
            }, 100)
        }
        // 新增校验校验身份证
        var validateSaveIdentity = (rule, value, callback) => {
            const identityReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
            if (!value) {
                return callback(new Error('身份证不能为空！'))
            } else {
                this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkIdentity',{
                    params: {
                        identity: value,
                        userId: this.userRealBindsForm.userId
                    }
                }).then(res => {
                    if (!res.data.flag) {
                        new callback(new Error('当前用户已绑定此证件,可以换个账户绑定'))
                    }
                })
            }
            setTimeout(() => {
                if (!identityReg.test(value)) {
                    return callback(new Error('请输入合法的身份证号'))
                } else {
                    callback()
                }
            }, 100)
        }
        /* 修改校验合法真实姓名 */
        var validateEditRealName = (rule, value, callback) => {
            const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
            if (!value) {
                return callback(new Error('真实姓名不能为空!!'))
            } else if (value === this.realNameRule) {
                callback()
            } else {
                if (!realnameReg.test(value)) {
                    return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
                } else {
                    this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkRealName', {
                        params: {
                            realName: value,
                            userId: this.userRealBindsFormEdit.userId
                        }
                    }).then(res => {
                        if (!res.data.flag) {
                            return callback(new Error('当前用户已经被绑定,可以换个账户绑定'))
                        } else {
                            callback()
                        }
                    })
                }
            }
        }
        /* 修改校验合法手机号 */
        var validateEditPhone = (rule, value, callback) => {
            const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (!value) {
                return callback(new Error('手机号码不能为空!!'))
            }
            setTimeout(() => {
                if (!phoneReg.test(value)) {
                    return callback(new Error('手机号码格式错误'))
                } else {
                    callback()
                }
            }, 100)
        }
        // 修改校验校验身份证
        var validateEditIdentity = (rule, value, callback) => {
            const identityReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
            if (!value) {
                return callback(new Error('身份证不能为空！'))
            } else if (value === this.identityRule) {
                callback()
            } else {
                this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkIdentity',{
                    params: {
                        identity: value,
                        userId: this.userRealBindsFormEdit.userId
                    }
                }).then(res => {
                    if (!res.data.flag) {
                        new callback(new Error('当前用户已绑定此证件,可以换个账户绑定'))
                    }
                })
            }
            setTimeout(() => {
                if (!identityReg.test(value)) {
                    return callback(new Error('请输入合法的身份证号'))
                } else {
                    callback()
                }
            }, 100)
        }
        return {
            // 新增弹框状态
            saveVisiable: false,
            // 修改弹框状态
            editVisiable: false,
            // 用于校验存放身份证号
            identityRule: '',
            // 用于校验存放真实姓名
            realNameRule: '',
            formLabelWidth: '120px',
            // 真实姓名（用于模糊查询）
            realName: '',
            // 存放实名信息列表
            userRealBindsList: [],
            multipleSelection: [],
            // 存放当前登录用户Id
            userId: '',
            // 存放游客类型列表
            passengerTypeList: [],
            // 存放证件类型列表
            papersTypeList: [],
            // 实名信息修改对象
            userRealBindsFormEdit: {
                id: '',
                // 真实姓名
                realName: '',
                // 身份证
                identity: '',
                // 手机号
                phone: '',
                // 关联账户id
                userId: '',
                // 证件类型Id
                papersTypeId: '',
                // 游客类型Id
                passengerTypeId: '',
                // 创建时间
                createTime: '',
                // 修改时间
                updateTime: ''
            },
            // 用户修改校验
            editUserRealBindsRules: {
                // 姓名验证
                realName: [
                    { validator: validateEditRealName, trigger: 'blur'},
                ],
                // 身份证验证
                identity: [
                    { validator: validateEditIdentity,required: true, trigger: 'blur' },
                ],
                // 手机号验证
                phone: [
                    { validator: validateEditPhone, trigger: 'blur'},
                ],
                // 账号绑定
                userId: [
                    { required: true, message: '请选择绑定账户', trigger: 'blur' }
                ],
                // 游客类型绑定
                passengerTypeId: [
                    { required: true, message: '请选择游客类型', trigger: 'blur' }
                ],
                // 证件类型绑定
                papersTypeId: [
                    { required: true, message: '请选择证件类型', trigger: 'blur' }
                ]
            },
            // 实名信息新增对象
            userRealBindsForm: {
                id: '',
                // 真实姓名
                realName: '',
                // 身份证
                identity: '',
                // 手机号
                phone: '',
                // 关联账户id
                userId: '',
                // 证件类型Id
                papersTypeId: '',
                // 游客类型Id
                passengerTypeId: '',
                // 创建时间
                createTime: '',
                // 修改时间
                updateTime: ''
            },
            // 用户新增校验
            saveUserRealBindsRules: {
                // 姓名验证
                realName: [
                    { validator: validateSaveRealName, trigger: 'blur'},
                ],
                // 身份证验证
                identity: [
                    { validator: validateSaveIdentity,required: true, trigger: 'blur' },
                ],
                // 手机号验证
                phone: [
                    { validator: validateSavePhone, trigger: 'blur'},
                ],
                // 账号绑定
                userId: [
                    { required: true, message: '请选择绑定账户', trigger: 'blur' }
                ],
                // 游客类型绑定
                passengerTypeId: [
                    { required: true, message: '请选择游客类型', trigger: 'blur' }
                ],
                // 证件类型绑定
                papersTypeId: [
                    { required: true, message: '请选择证件类型', trigger: 'blur' }
                ]
            },
        }
    },
    mounted () {
        this.userId = window.sessionStorage.getItem('id')
        // 初始化渲染实名信息列表
		this.getUserRealBinds()
		// 初始化渲染获取游客类型列别
		this.getPassengerTypeList()
		// 初始化获取证件类型列表
		this.getPapersTypeList()
    },
    methods: {
        // 批量删除提示框
        handleCloseDeleteBatch () {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteBatchUserRealBinds()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 批量删除实名信息
        deleteBatchUserRealBinds () {
            const ids = this.multipleSelection.map(v=>v.id)
            this.$axios.post('http://127.0.0.1:8082/userRealBinds/deleteBatchUserRealBinds?ids=' + ids).then(res =>{
                if (res.data.obj > 0) {
                    this.message('删除成功', 'success')
                    this.getUserRealBinds()
                } else {
                    this.message('删除失败', 'warning')
                }
            })
        },
        // 创建实名信息提交校验判断
        saveSubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.saveUserRealBinds()
                } else {
                    return false;
                }
            })
        },
        // 新增实名信息
        saveUserRealBinds () {
            var formdata = new FormData()
            formdata.set('realName', this.userRealBindsForm.realName)
            formdata.set('identity', this.userRealBindsForm.identity)
            formdata.set('phone', this.userRealBindsForm.phone)
            formdata.set('userId', this.userRealBindsForm.userId)
            formdata.set('papersTypeId', this.userRealBindsForm.papersTypeId)
            formdata.set('passengerTypeId', this.userRealBindsForm.passengerTypeId)
            this.$axios.post('http://127.0.0.1:8082/userRealBinds/saveUserRealBins', formdata)
            .then(res => {
                if (res.data.obj > 0) {
                    this.message('恭喜您，添加成功', 'success')
                    // 初始化对象数据
                    this.userRealBindsForm = {
                        id: '',
                        // 真实姓名
                        realName: '',
                        // 身份证
                        identity: '',
                        // 手机号
                        phone: '',
                        // 关联账户id
                        userId: '',
                        // 创建时间
                        createTime: '',
                        // 修改时间
                        updateTime: ''
                    }
                    // 关闭弹窗
                    this.saveVisiable = false
                    this.getUserRealBinds()
                } else {
                    this.message('添加失败', 'warning')
                }
            }) 
        },
        // 新增重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.imageUrl = ''
        },
        // 弹窗关闭前的提醒
        handleClose(done) {
            this.$confirm('关闭后数据将不会被保存，确认关闭？')
            .then(_ => {
                done();
                // 实名信息新增对象
                this.userRealBindsForm = {
                    id: '',
                    // 真实姓名
                    realName: '',
                    // 身份证
                    identity: '',
                    // 手机号
                    phone: '',
                    // 关联账户id
                    userId: '',
                    // 创建时间
                    createTime: '',
                    // 修改时间
                    updateTime: ''
                }
            })
            .catch(_ => {});
        },
        // 修改实名信息提交校验判断
        editSubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.editUserRealBinds()
                } else {
                    return false;
                }
            })
        },
        // 打开修改弹窗（点击修改执行方法）
        userRealBindsEdit (row) {
            this.editVisiable = true
            this.userRealBindsFormEdit = row
            this.realNameRule = row.realName
            this.identityRule = row.identity
            this.userRealBindsFormEdit.userId = this.userId
            
        },
        // 修改实例信息
        editUserRealBinds () {
            var formdata = new FormData()
            formdata.set('id', this.userRealBindsFormEdit.id)
            formdata.set('realName', this.userRealBindsFormEdit.realName)
            formdata.set('identity', this.userRealBindsFormEdit.identity)
            formdata.set('phone', this.userRealBindsFormEdit.phone)
            formdata.set('userId', this.userRealBindsFormEdit.userId)
            formdata.set('papersTypeId', this.userRealBindsFormEdit.papersTypeId)
            formdata.set('passengerTypeId', this.userRealBindsFormEdit.passengerTypeId)
            this.$axios.put('http://127.0.0.1:8082/userRealBinds/editUserRealBinds', formdata).then(res => {
                if (res.data.flag) {
                    this.message('恭喜您，修改成功', 'success')
                    // 初始化对象数据
                    this.userRealBindsFormEdit = {
                        id: '',
                        // 真实姓名
                        realName: '',
                        // 身份证
                        identity: '',
                        // 手机号
                        phone: '',
                        // 关联账户id
                        userId: '',
                        // 创建时间
                        createTime: '',
                        // 修改时间
                        updateTime: ''
                    }
                    // 关闭弹窗
                    this.editVisiable = false
                    this.getUserRealBinds()
                } else {
                    this.message('修改失败，请重试', 'warning')
                }
            })
        },
        // 删除提示框
        hintDetele (id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteUserRealBinds(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        deleteUserRealBinds (id) {
            this.$axios.delete('http://127.0.0.1:8082/userRealBinds/deleteUserRealBinds',{
                params: {
                    id: id
                }
            }).then(res => {
                if (res.data.obj > 0) {
                    this.message('删除成功', 'success')
                    this.getUserRealBinds()
                } else {
                    this.message('删除失败', 'warning')
                }
            })
        },
        // 打开新增弹框
        openSaveVisiable () {
            this.saveVisiable = true
            this.userRealBindsForm.userId = this.userId
        },
        // 获取游客类型列别
        getPassengerTypeList () {
            this.$axios.get('http://127.0.0.1:8082/passengerType/getPassengerTypeList').then(res =>{
                this.passengerTypeList = res.data.obj
            })
        },
        // 获取证件类型列表
        getPapersTypeList () {
            this.$axios.get('http://127.0.0.1:8082/papersType/getPapersTypeList').then(res =>{
                this.papersTypeList = res.data.obj
            })
        },
        // table列表信息被选中时触发事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 获取实名信息
        getUserRealBinds () {
            this.$axios.get('http://127.0.0.1:8082/userRealBinds/getUserRealBindsListView', {
                params: {
                    userId: this.userId
                }
            }).then(res => {
                this.userRealBindsList = res.data.obj
            })
        },
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            })
        }
    }
}
</script>

<style scoped>
#userRealBinds{
    width: 100%;
    height: 100%;
    line-height:0px;
}
.userRealBinds_div1{
    margin: 0 auto;
    width: 1030px;
    height: 870px;
}
</style>
